<template>
    <div id="app-manage">
        <el-tabs v-model="curTab" type="card" @tab-click="tabClick">
            <el-tab-pane label="版本配置" name="version" >
                <versionList></versionList>
            </el-tab-pane>
            <el-tab-pane label="轮播图" name="slide" >
                <slideList></slideList>
            </el-tab-pane>
            <el-tab-pane label="问题反馈" name="feedback" >
                <feedbackList></feedbackList>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script>
import versionList from './version-list'
import slideList from './slide-list'
import feedbackList from './feedbackList'
export default {
    components:{ versionList,slideList ,feedbackList},
    data(){
        return{
            curTab:'version',
        }
    },

    methods: {
		tabClick(obj){
			this.$nextTick(()=>{
				var el=document.querySelector("#pane-"+obj.name +" .el-table");
				var pHeight=el.parentNode.offsetHeight;
				var ethw=el.querySelector(".el-table__header-wrapper");
				if(!ethw){return}
				var tableHeadHeight=ethw.offsetHeight;
				var tablebody=el.querySelector(".el-table__body-wrapper");
				if(tablebody && pHeight>0){
					tablebody.style.height=pHeight-tableHeadHeight +"px";
					tablebody.style.overflowY="auto"
				}
			})
		}


    },
    created(){

    }

}
</script>
<style scoped lang="scss">
#app-manage{
    height: 100%;
}

</style>
<style scoped lang="scss">
/deep/ .el-tabs{
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    .el-tabs__header{
        margin-bottom: 0px;
        .el-tabs__nav{
            width: 100%;
            border: none;
            .el-tabs__item{
                width: 150px;
                text-align:center;
                border-left: none;
                border-right: 1px solid #eee;
                
            }
        }
    }
    .el-tabs__content{
        flex: 1;
        overflow: hidden;
        .el-tab-pane{
            height: 100%;
        }
    }
}

/deep/ .el-table{
	.el-table__expanded-cell{
		background-color: #fafafa !important;
		box-shadow: 0px 0px 5px 0px #dcdcdc inset;
	}
	tr:hover td{
		background-color: #f6f6f6;
	}
	tr.expanded:hover td{
		background-color: #f6f6f6;
	}
	tr.el-table__row:not(.el-table__row--striped):hover td{
		background-color: transparent;
	}
	
}

</style>
